<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
  <body>
    <span>铁齿铜牙纪晓岚</span>
    <p>铁齿铜牙纪晓岚</p>
    <div
      id="con"
      style="margin-left: 10px; background: red; width: 400px; height: 300px"
    ></div>
  </body>
  <script>
    document.body.style.fontSize = window.innerWidth / 18.2927 + 'px'
    document.getElementById('con').style.width = window.innerWidth * 0.87 + 'px'

    // document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px' //1rem = 100px
    // document.body.style.fontSize = '14px' // 在body上将字体还原大小，避免页面无样式字体超大
    //找到当前设备的宽高 进行等比例的裁减
    //rem适配
    // ;(function () {
    //   var styleN = document.createElement('style')
    //   var width = document.documentElement.clientWidth / 16
    //   styleN.innerHTML = 'html{font-size:' + width + 'px!important}'
    //   document.head.appendChild(styleN)
    // })()

    // function rem(doc, win) {
    //   let docEl = doc.documentElement //考虑以及兼容了 屏幕旋转的事件
    //   let resizeEvt =
    //     'orientationchange' in window ? 'orientationchange' : 'resize'
    //   console.log(resizeEvt)
    //   let recalc = function () {
    //     var clientWidth = docEl.clientWidth
    //     if (!clientWidth) return
    //     if (clientWidth >= 750) {
    //       docEl.style.fontSize = '100px'
    //     } else {
    //       docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
    //     }
    //   }
    //   if (!doc.addEventListener) return
    //   win.addEventListener(resizeEvt, recalc, false) // 屏幕大小以及旋转变化自适应
    //   doc.addEventListener('DOMContentLoaded', recalc, false) // 页面初次打开自适应
    //   recalc()
    // }
    // rem(document, window)
  </script>
</html>
